<template>
  <view class="custom-tabbar">
    <u-tabbar :value="index" @change="handleTabChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
              activeColor="#fa8c16">
      <u-tabbar-item v-for="(item, idx) in list" :key="idx" :text="item.text">
        <template #active-icon>
          <image class="icon" :src="item.selectedIconPath"></image>
        </template>
        <template #inactive-icon>
          <image class="icon" :src="item.iconPath"></image>
        </template>
      </u-tabbar-item>
    </u-tabbar>

    <!-- 发布菜单弹窗 -->
    <u-popup :show="showPublishMenu" @close="showPublishMenu = false" :round="10" :overlayStyle="{ opacity: 0.6 }">
      <view class="publish-menu">
        <!-- 发布帖子 -->
        <view class="menu-item green" @click="toIssue('post')">
          <text class="title">发布帖子</text>
          <text class="subtitle">吐槽 表白 求助</text>
        </view>

        <view class="style-box">
          <!-- 有偿求助 -->
          <view class="menu-item yellow" @click="toIssue('help')">
            <text class="title">有偿求助</text>
            <text class="subtitle">帮取 帮买 帮做</text>
          </view>
          <!-- 闲置交易 -->
          <view class="menu-item gray" @click="toIssue('trade')">
            <text class="title">闲置交易</text>
            <text class="subtitle">出闲置 求购宝贝</text>
          </view>
        </view>

        <!-- 社区广告投放 -->
        <view class="ad-link" @click="toAdPage">
          <text>社区广告投放</text>
        </view>
        <!-- 关闭按钮 -->
        <view class="close-btn" @click="showPublishMenu = false">
          <image class="icon" src="/static/icon/close.png"></image>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const showPublishMenu = ref(false)

const list = [
  {
    pagePath: 'pages/home/home',
    iconPath: '/static/icon/unselect_home.png',
    selectedIconPath: '/static/icon/selected_home.png',
    text: '首页'
  },
  {
    pagePath: 'pages/transaction/transaction',
    iconPath: '/static/icon/unselect_shop.png',
    selectedIconPath: '/static/icon/selected_shop.png',
    text: '交易'
  },
  {
    pagePath: 'pages/publish/publish',
    iconPath: '/static/icon/add.png',
    selectedIconPath: '/static/icon/add.png',
    text: '发布'
  },
  {
    pagePath: 'pages/message/message',
    iconPath: '/static/picture/message.png',
    selectedIconPath: '/static/picture/message_selected.png',
    text: '消息'
  },
  {
    pagePath: 'pages/mine/mine',
    iconPath: '/static/icon/unselect_person.png',
    selectedIconPath: '/static/icon/selected_person.png',
    text: '我的'
  }
]

const handleTabChange = (index) => {
  if (index === 2) {
    showPublishMenu.value = true
    return
  }
  const path = list[index].pagePath
  console.log('即将跳转路径:', path)
  uni.switchTab({
    url: '/' + path // 确保路径为 `/pages/xxx/xxx`
  })

  store.commit('changeTabbarIndex', index)
}
//发布菜单跳转
const toIssue = (type) => {
  // 根据 type 跳转到相应的页面
  switch (type) {
    case 'post':
      uni.navigateTo({ url: '/pages/publish/articlepublish' });
      break;
    case 'help':
      uni.navigateTo({ url: '/pages/publish/helppublish' });
      break;
    case 'trade':
      uni.navigateTo({ url: '/pages/publish/tradepublish' });
      break;
  }
  showPublishMenu.value = false; // 关闭弹窗
}
// 社区广告投放跳转
const toAdPage = () => {
  uni.navigateTo({ url: '/pages/ad/ad' }); // 根据实际需求修改跳转路径
  showPublishMenu.value = false; // 关闭弹窗
}
</script>


<style lang="scss" scoped>
.icon {
  width: 50rpx;
  height: 50rpx;
}

.publish-menu {
  padding: 40rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .menu-item {
    width: 96%;
    margin: 20rpx 0;
    padding: 20rpx;
    border-radius: 10rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 30rpx;
      margin-bottom: 5rpx;
    }

    .subtitle {
      font-size: 24rpx;
      color: #666;
    }
  }

  .green {
    background-color: #07c160;
    color: #fff;
  }

  .yellow {
    margin-right: 15rpx;
    width: 48%;
    background-color: #ff9700;
    color: #fff;
  }
  .gray {
    margin-left: 15rpx;
    width: 48%;
    background-color: #ccc;
    color: #333;
  }

  .ad-link {
    width: 100%;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
    color: #333;
    text-align: center;
    font-size: 28rpx;
    margin: 20rpx 0;
  }

  .close-btn {
    margin-top: 20rpx;
    display: flex;
    justify-content: center;

    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.style-box{
  width: 100%;
  display: flex;
  flex-direction: row;
}
</style>
